import { lazyLoadRoute } from '@/utils/lazyLoadRoute'
import Layout from '@/view/layout'
import { createBrowserRouter } from 'react-router-dom'

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        index: true,
        lazy: lazyLoadRoute(() => import('@/view/movie_list')),
        hydrateFallbackElement: <></>
      },
      {
        path: 'movie-count',
        lazy: lazyLoadRoute(() => import('@/view/movie_count')),
        hydrateFallbackElement: <></>
      },
      {
        path: 'movie-type',
        lazy: lazyLoadRoute(() => import('@/view/movie_type')),
        hydrateFallbackElement: <></>
      },
      {
        path: 'movie-rating',
        lazy: lazyLoadRoute(() => import('@/view/movie_rating')),
        hydrateFallbackElement: <></>
      },
      {
        path: 'movie-ranking',
        lazy: lazyLoadRoute(() => import('@/view/movie_ranking')),
        hydrateFallbackElement: <></>
      },
      {
        path: 'movie-evaluation',
        lazy: lazyLoadRoute(() => import('@/view/movie_evaluation')),
        hydrateFallbackElement: <></>
      },
      {
        path: 'wordcloud',
        lazy: lazyLoadRoute(() => import('@/view/word_cloud')),
        hydrateFallbackElement: <></>
      }
    ]
  }
])

export default router
